<template>
    <div class="mode_bt_list">
        <el-tooltip effect="dark" content="列表" placement="bottom">
            <i 
                :class="{
                    'el-icon-s-unfold':true,
                    'on_mode':value=='list',
                }" 
                @click="on_change('list')">
            </i>
        </el-tooltip>
        <el-tooltip effect="dark" content="缩略图" placement="bottom">
            <i 
                :class="{
                    'el-icon-s-grid':true,
                    'on_mode':value=='thumb',
                }" 
                @click="on_change('thumb')">
            </i>
        </el-tooltip>
    </div>
</template>
<script>
export default {  //显示模式选择按钮组件
    name:'Mode_bt_list',
    props:{
        value:{
            type:String,
            default:'',
        },
        
    },
    methods:{
        on_change(mode_data){
            this.$emit('input',mode_data);
        },
    },
}
</script>
<style lang="scss" scoped>
.mode_bt_list{
    width: fit-content;
    display: flex;
    align-items: center;
    i{
        margin-left: 20px;
        font-size: 25px;
        color: #687176;
        cursor: pointer;
        background-color: #f4f4f4;
        border-radius: 3px;
        padding: 3px;
    }
    >.on_mode{
        color: #2980ff;
        border-radius: 5px;
    }
}
</style>